<template>
  <div>
    <!-- 轮播图组件 -->
    <film-swiper :key='datalist.length'
                 class="filmswiper">
      <!-- 轮播图组件的插槽 -->
      <film-item v-for='data in datalist'
                 :autoplay='true'
                 :loop='true'
                 class="filmswiperitem"
                 :key='data'>

        <img :src="data" />

      </film-item>
    </film-swiper>
    <!-- 轮播图的头部 -->
    <film-header class="sticky"></film-header>
    <!-- 响应的router视图 -->
    <router-view></router-view>
  </div>
</template>
<script>
import filmSwiper from '@/components/films/FilmSwiper';
import filmItem from '@/components/films/FilmSwiperItem';
import axios from 'axios'
import filmHeader from '@/components/films/Filmheader'
export default {
  // 引入组件
  components: {
    filmSwiper,
    filmItem,
    filmHeader
  },
  data () {
    return {
      datalist: []
    }
  },
  mounted () {
    setTimeout(() => {
      // axios.get('/test.json').then((res) => {
      //   console.log(res.data.data.films)
      //   this.datalist = res.data.data.films
      // })
      this.datalist = ['https://gimg2.baidu.com/image_search/src=http%3A%2F%2Finews.gtimg.com%2Fnewsapp_bt%2F0%2F12762689340%2F1000.jpg&refer=http%3A%2F%2Finews.gtimg.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1647419795&t=e399f822341b3c5d40d7df171c477cd7',
        'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fi0.hdslb.com%2Fbfs%2Farticle%2F24b97ad72c080c164c0565172bf5ee7997cacaf3.jpg&refer=http%3A%2F%2Fi0.hdslb.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1647419795&t=8b786b4cc2596189973e4ff57be42578',
        'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Finews.gtimg.com%2Fnewsapp_bt%2F0%2F12769077837%2F1000.jpg&refer=http%3A%2F%2Finews.gtimg.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1647419795&t=b4baeeb05037ddd7c007080d0575e490',
        'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fi0.hdslb.com%2Fbfs%2Farticle%2Fcdff990bd2fd81d2eedc1aaa0fab53a822ea36e9.jpg&refer=http%3A%2F%2Fi0.hdslb.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1647419795&t=012295644ffb855a0dffffa91b157b79']
    }, 1);
  },

}
</script>
<style scoped>
.filmswiperitem img {
  width: 100%;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}
.filmswiper {
  overflow: hidden;
  width: 23.4375rem;
  height: 13.125rem;
}
/* 粘性定位 */
.sticky {
  /* 粘性定位，当离top为0时，就黏住 */
  position: sticky;
  top: 0;
  background: white;
  z-index: 100;
}
</style>